// 轮播WMS图层
function AnimateImage (_map, urlList, dataTimeDiv) {
  _map.setLayoutProperty('myImageLayer', 'visibility', 'none')
  _map.setLayoutProperty('timeserialImageLayer', 'visibility', 'visible')
  var currentImage = 0
  var frameCount = urlList.length
  var intervalId = setInterval(function () {
    currentImage = currentImage % frameCount
    if (currentImage >= frameCount - 1) {
      clearInterval(intervalId)
      return
    }
    console.log(urlList[currentImage])
    // 方法1： 轮播png图片
    dataTimeDiv.dt = urlList[currentImage].split('_').slice(-1)[0].replace('.png', '')
    _map.getSource('timeserialSourceId').updateImage({ url: urlList[currentImage] }) // timeserialSourceId 为你要替换的souce的ID号
    // 方法2：我最开始用替换WMS数据源的方式切换时间序列图层，效果不太好，后来替换成了下面两行。
    // DispalyImage(_map, urlList[currentImage]) // 利用WMS实现时间序列，效果不好
    currentImage = (currentImage + 1)
  }, 1000) // 1S切换一次
}

// WMS切换的执行函数 dataTimeDiv显示当前数据时间的一个div，你用不到可以隐去
function DispalyImage (_map, imageurl, dataTimeDiv) {
  console.log(_map.getSource('imageSourceId'))
  // _map.getSource('imageSourceId').updateImage({ tiles: [imageurl] })
  var _source = _map.getSource('imageSourceId')
  _source.tiles = [imageurl]
  _source.tileSize = 256
  _source.type = 'raster'

  // 照片图层可以直接替换数据源，替换后地图即刷新
  // WMS图层不可以
  // 处理思路：1、删除图层和数据源；2、利用_addLayer函数重新添加该图层
  _map.removeLayer('myImageLayer')
  _map.removeSource('imageSourceId')

  _addLayer(_map, imageurl)

  dataTimeDiv.dt = imageurl.split('_').slice(-1)[0]
}

function _addLayer (_map, url) {
  _map.addSource('imageSourceId', {
    'type': 'raster',
    'tiles': [
      url
    ],
    'tileSize': 256
  })
  _map.addLayer({
    id: 'myImageLayer',
    'type': 'raster',
    'source': 'imageSourceId',
    'paint': {}
  }, 'borderCountryLayer')
  _map.setLayoutProperty('timeserialImageLayer', 'visibility', 'none')
  _map.setLayoutProperty('myImageLayer', 'visibility', 'visible')
}

export { AnimateImage, DispalyImage }
